<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <p>刷新次数: {{ count }}</p>
  </van-pull-refresh>
  <div class="login-container">
    <van-cell title="展示弹出层" is-link @click="showPopup" />
    <van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup>
    <!-- 手机号输入 -->
    <van-field v-model="phoneNumber" placeholder="请输入手机号" clearable />

    <!-- 滑块验证 -->
    <div class="slider-verification-container">
      <van-slider v-model="sliderValue" @drag-end="handleSliderDragEnd" />
    </div>

    <!-- 验证码输入 -->
    <van-field
        v-if="isSliderVerified"
        v-model="verificationCode"
        placeholder="请输入验证码"
        clearable
    />

    <!-- 获取验证码按钮 -->
    <van-button
        v-if="isSliderVerified"
        type="primary"
        @click="sendVerificationCode"
        :disabled="countdown > 0"
    >
      {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
    </van-button>

    <!-- 提交按钮 -->
    <van-button
        v-if="isSliderVerified"
        type="info"
        @click="submit"
        :disabled="!isFormValid"
    >
      提交
    </van-button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { Field, Slider, Button } from 'vant';
import { showToast } from 'vant';
export default {
  name:"loginAdmin1",
  components: {
    'van-field': Field,
    'van-slider': Slider,
    'van-button': Button,
  },
  setup() {
    const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const phoneNumber = ref('');
    const verificationCode = ref('');
    const sliderValue = ref(0);
    const isSliderVerified = ref(false);
    const countdown = ref(0);

    const isFormValid = computed(() => {
      return phoneNumber.value.length === 11 && verificationCode.value.length > 0 && isSliderVerified.value;
    });

    const handleSliderDragEnd = () => {
      if (sliderValue.value === 100) {
        isSliderVerified.value = true;
      }
    };

    const sendVerificationCode = () => {
      if (phoneNumber.value.length !== 11) {
        showToast('请输入有效的手机号码');
        return;
      }
      // 发送验证码逻辑
      alert('验证码已发送');
      countdown.value = 60;

      // 前端的定时任务
      // while(true){
      //    countdown.value--;
      //    if(countdown.value === 0){
      //      break;
      //    }
      //    Thread.sleep(1000)
      // }
      let interval = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
          clearInterval(interval);
        }
      }, 1000);
    };

    const submit = () => {
      alert('提交成功');
      // 提交表单逻辑
    };

    return {
      phoneNumber,
      verificationCode,
      sliderValue,
      isSliderVerified,
      countdown,
      isFormValid,
      handleSliderDragEnd,
      sendVerificationCode,
      submit,
      show,
      showPopup,
      count,
      loading,
      onRefresh
    };
  }
};
</script>

<style>
.login-container {
  margin: 20px;
}
</style>
